<template>
    <div :id="sliderId"></div>
</template>
<style>
    .noUi-pips.noUi-pips-horizontal{
        display: none;
    }
</style>
<script>

    var noUiSlider =require('../../resources/vendor/lib/nouislider/nouislider')

    export default {
        replace: true,
        props: {
            sliderValue:{
                twoWay: true,
                required: true
            },
            sliderMax:{
                type: Number,
                default: function _default() {
                    return 0;
                }
            },
            sliderMin:{
                type: Number,
                default: function _default() {
                    return 0;
                }
            },
            sliderStep:{
                type: Number,
                default: function _default() {
                    return 0;
                }
            }
        },
        data (){
            return {
                sliderId: this.uuid4()
            }
        },
        watch:{
            "sliderValue" (newVal, oldVal) {
                //console.log(newVal, oldVal)
                var slider = document.getElementById(this.sliderId);
                slider.noUiSlider.set(newVal);
            }
        },
        ready (){
            var slider = document.getElementById(this.sliderId)
            noUiSlider.create(slider, {
                start: this.sliderValue,
                step: this.sliderStep,
                range: {
                    'min': [this.sliderMin],
                    'max': [this.sliderMax]
                },
                connect: 'lower',
                tooltips:true,
//                pips: {
//                    mode: 'values',
//                    values: [5, 10, 15],
//                    density: 5
//                },
                format: {
                    to: function (value) {
                        return value
                    },
                    from: function (value) {
                        return value
                    }
                }
            })
            slider.noUiSlider.on('update', this.updateValue);
        },
        methods:{
            updateValue (value) {
                this.sliderValue = value[0]
            },
            uuid4 () {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8)
                    return v.toString(16)
                })
            }
        }
    }

</script>
